/**
 * @author Eli
 */
$(function(){
	// Lets create the Screen, the actual place where the object can be worked with
	var screen = $("<div></div>").css({
		background: '#444',
		'-moz-box-shadow': '0 0 5px #000',
		'margin': '12px 24px',
		'height': '650px',
		'overflow': 'hidden'
	}).appendTo('body');
	
	// Create new Image object
	
	var img = $("<img>");
	img.attr('src','jenny.jpg').appendTo(screen);
	img.screen = screen;
	
	// Set the image in the middle
	imgSize = {width: img.width(), height: img.height()};
	screenSize = {width: screen.width(), height: screen.height()};
	screenOffset = screen.offset();
	
	ctrl = document.JPie(img);
	ctrl.position(((screenSize.width / 2) - (imgSize.width / 2)), ((screenSize.height / 2) - (imgSize.height / 2)));
	
	
});

(function() {
	var objectController = {
		init: function (obj) {
			
			size = {width: obj.width(), height: obj.height()};
			pos = obj.offset();
			/*
			 *  + Container
			 	|-- Image
			 	|-- Handles
			 	'-- Overlay
			 */
			
			// Add overlay to the image object
			container = $("<div></div>").css({
				position: 'absolute',
				top: pos.y+'px',
				left: pos.x+'px',
				width: size.width+'px',
				height: size.height+'px'
			}).appendTo(obj.screen);
			obj.appendTo(container);
			
			overlay = $("<div></div>").css({
				position: 'absolute',
				top: 0,
				left: 0,
				width: '100%',
				height: '100%',
				background: '#FFF',
				opacity: 0.0001
			}).appendTo(container);
			
			this.obj = container;
			this.overlay = overlay;
			this.image = obj;
			
			
			// Add Dragging Ability
			$(overlay).bind('drag',this, this.drag);
			// .bind('dragstart', this, this.dragstart ).bind('dragend',this.dragend)
			obj.that = document.JPie;
			
			this.makeHandles();
			
			return this;
		},
		
		resize: function (x, y) {
			this.obj.attr('width',x).attr('height',y);
		},
		
		drag: function (event) {
			that = event.data;
			// For now, this simply moves the object on our screen
			that.position(event.offsetX, event.offsetY);
		},
		
		makeHandles: function () {
			// Get our object size and position
			var pos = this.obj.position();
			var size = {w: this.obj.width(), h: this.obj.height() };
			
			handles = {};
			handles.n = this.createHandle((size.w / 2) - 4, 0 - 4); // North - Top
			handles.ne = this.createHandle(size.w - 4, -2);
			handles.e = this.createHandle(size.w - 4, (size.h / 2) + 4);
			handles.se = this.createHandle(size.w - 4, size.h - 4);
			handles.s = this.createHandle((size.w / 2) - 4, size.h - 4);
			handles.sw = this.createHandle(-4, size.h - 4);
			handles.w = this.createHandle(-4, (size.h / 2) + 4);
			handles.nw = this.createHandle(-4,-4);
			for (i in handles) {
				$(handles[i]).css('cursor',i+'-resize');
			}
			
		},
		
		createHandle: function (x, y) {
			h = $("<div></div>");
			h.bind('drag',this, this.dragHandle).appendTo(this.obj)
			.css({top: y+'px', left: x+'px', position: 'absolute',width: '7px', height: '7px', background: 'url(../images/handle.png) left top no-repeat'}).
			hover(function(){ $(this).css('background-position','left -7px')},function(){ $(this).css('background-position','left top')});
			return h;
		}
	};
	
	
	
	objectController.position = function () {
		if (arguments.length > 0) {
			$(this.obj).css({
				left: arguments[0] + 'px',
				top: arguments[1] + 'px'
			});
		}
		else {
			return this.obj.offset();
		}
	}
	
	
	document.JPie = function(obj){
		return objectController.init(obj);
	};
})();
